<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>坐标变换</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
  let canvas = document.querySelector('#canvas');
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  let ctx = canvas.getContext('2d');
  ctx.fillRect(0, 0, innerWidth, innerHeight);
  ctx.translate(innerWidth / 2, innerHeight / 4);

  // ctx.translate(innerWidth/2, innerHeight/4)
  setInterval(() => {
    // ctx.translate(0,0)
    // ctx.clearRect(0, 0, 200, 150)
    change3();
    change2();
    change()

  }, 1000 / 60);

  function change() {
    ctx.fillStyle = 'rgba(255,0,0,1)';
    ctx.translate(25, 25);
    ctx.scale(0.95, 0.95);
    ctx.rotate(Math.PI / 10);
    ctx.fillRect(0, 0, 200, 150)
  }

  function change2() {
    ctx.fillStyle = 'rgba(0,0,255,1)';
    ctx.translate(25, 25);
    ctx.scale(0.95, 0.95);
    ctx.rotate(Math.PI / 10);
    ctx.fillRect(0, 0, 200, 150)
  }

  function change3() {
    ctx.fillStyle = 'rgba(0,255,0,1)';
    ctx.translate(25, 25);
    ctx.scale(0.95, 0.95);
    ctx.rotate(Math.PI / 10);
    ctx.fillRect(0, 0, 200, 150)
  }

</script>
</html>
